<template>
    <section class="page-container">
        <el-row :gutter="20">
            <el-col :span="11" class="b-r h-full">
                <el-form :inline="true" :model="searchFormData" label-position="top">
                    <el-col :span="8">
                        <el-form-item label="字典名">
                            <el-input placeholder="字典名" v-model="searchFormData.codeName" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="字典含义">
                            <el-input placeholder="字典含义" v-model="searchFormData.codeContent" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="margin-top: 45px">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="searchData" >查询</el-button>
                            <el-button type="primary" icon="el-icon-refresh-right" @click="resetSearchForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
                <el-table
                        max-height="600"
                        :data="codeTableData"
                        @row-click="rowClick"
                        highlight-current-row
                        stripe>
                    <el-table-column
                            label="序号"
                            type="index">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="codeName"
                            label="字典名">
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="codeContent"
                            label="字典含义">
                    </el-table-column>
                    <el-table-column
                            align="right"
                            fixed="right">
                        <template slot="header">
                            <el-button
                                    size="small"
                                    type="primary"
                                    icon="el-icon-plus"
                                    @click.stop="addCodeFormVisible = true">新增</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="small"
                                    type="primary"
                                    icon="el-icon-edit"
                                    @click.stop="openUpdateDialog(scope.$index, scope.row)" >修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12" :offset="1">
                <p class="page-title">{{this.current_code == null? '' : this.current_code.codeName}} {{this.current_code == null? '' : this.current_code.codeContent}} 字典详情</p>

                <el-table :data="current_code_details"
                          @row-click="handleCurrentItemChange"
                          highlight-current-row>
                    <el-table-column
                            label="字典详情名"
                            prop="detailKey">
                    </el-table-column>
                    <el-table-column
                            label="字典详情含义"
                            prop="detailValue">
                    </el-table-column>
                    <el-table-column
                            align="right"
                            fixed="right">
                        <template slot="header">
                            <el-button
                                    size="small"
                                    type="primary"
                                    icon="el-icon-plus"
                                    @click.stop="add_code_item">新增</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="small"
                                    type="primary"
                                    icon="el-icon-edit"
                                    @click.stop="openUpdateDetailDialog(scope.$index, scope.row)" >修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <!--新增code-->
            <el-dialog title="新增字典" width="40%" :visible.sync="addCodeFormVisible" :close-on-click-modal="false">
                <el-form :model="addCodeFormData" label-width="80px">
                    <el-form-item label="字典名" >
                        <el-input v-model="addCodeFormData.codeName"></el-input>
                    </el-form-item>
                    <el-form-item label="字典含义" >
                        <el-input v-model="addCodeFormData.codeContent"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addCodeFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save_add_code_data">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改字典" width="40%" :visible.sync="updateCodeFormVisible" :close-on-click-modal="false">
                <el-form :model="updateCodeFormData" label-width="80px">
                    <el-form-item label="字典名" >
                        <el-input v-model="updateCodeFormData.codeName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="字典含义" >
                        <el-input v-model="updateCodeFormData.codeContent"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateCodeFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save_update_code_data">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="新增字典内容" width="40%" :visible.sync="addCodeItemFormVisible" :close-on-click-modal="false">
                <el-form :model="addCodeDetailFormData" label-width="120px">
                    <el-form-item label="字典详情名" >
                        <el-input v-model="addCodeDetailFormData.detailKey"></el-input>
                    </el-form-item>
                    <el-form-item label="字典详情含义" >
                        <el-input v-model="addCodeDetailFormData.detailValue"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addCodeItemFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save_add_code_item_data">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改字典内容" width="40%" :visible.sync="updateCodeItemFormVisible">
                <el-form :model="updateCodeDetailFormData" label-width="120px">
                    <el-form-item label="字典详情名" >
                        <el-input v-model="updateCodeDetailFormData.detailKey" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="字典详情含义" >
                        <el-input v-model="updateCodeDetailFormData.detailValue"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateCodeItemFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save_update_code_item">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </section>
</template>

<script>
    import http from "../../../api/axios-interceptors";

    export default {
        name: "paramManager",
        data() {
            return {
                codeTableData: [],
                current_code_details: [],
                current_code: null,
                current_code_detail: null,
                addCodeFormVisible: false,
                addCodeFormData: {},
                updateCodeFormVisible: false,
                updateCodeFormData: {},
                addCodeItemFormVisible: false,
                addCodeDetailFormData: {},
                updateCodeItemFormVisible: false,
                updateCodeDetailFormData: {},
                searchFormData: {
                    codeName: '',
                    codeContent: ''
                },
                saveAllData: []
            }
        },
        created () {
            http.get('/syscode/syscodes').then(response => {
                this.codeTableData = response;
            });
        },
        methods: {
            resetSearchForm() {
              this.searchFormData = {
                  codeName: '',
                  codeContent: ''
              }
            },
            searchData(){
                http.get('/syscode/syscodes/example', {params: this.searchFormData}).then(response => {
                    this.codeTableData = response;
                });
            },
            //  左侧表单点击事件
            rowClick(currentRow) {
                this.current_code = currentRow;
                if(null != currentRow) {
                    http.get(`/syscodeDetail/getSyscodeDetailsBySysCodeId/${currentRow.codeId}`).then(response => {
                        this.current_code_details = response;
                    })
                }
            },
            handleCurrentChange(currentRow) {
                this.current_code = currentRow;
                if(null != currentRow) {
                    http.get(`/syscodeDetail/getSyscodeDetailsBySysCodeId/${currentRow.codeId}`).then(response => {
                        this.current_code_details = response;
                    })
                }
            },
            //  右侧表单点击事件
            handleCurrentItemChange(currentRow) {
                this.current_code_detail = currentRow;
            },
            //  保存新增的字典
            save_add_code_data(){
                this.addCodeFormVisible = false;
                let param = {
                    codeName: this.addCodeFormData.codeName,
                    codeContent: this.addCodeFormData.codeContent
                };
                this.addCodeFormData = {};
                http.post('/syscode/syscode', this.$qs.stringify(param)).then(response => {
                    this.codeTableData.push(response);
                });
            },
            //  打开修改弹出框
            openUpdateDialog(index, row){
                this.updateCodeFormData = clone(row);
                this.updateCodeFormVisible = true;
            },
            //  保存修改的字典内容
            save_update_code_data(){
                let params = {
                    'codeId': this.updateCodeFormData.codeId,
                    'codeName': this.updateCodeFormData.codeName,
                    'codeContent': this.updateCodeFormData.codeContent
                }
                http.put('/syscode/syscode', this.$qs.stringify(params)).then(() => {
                    const index = this.codeTableData.findIndex(item => this.current_code.codeId=== item.codeId);
                    this.codeTableData[index] = this.updateCodeFormData;
                    this.updateCodeFormData = {};
                    this.updateCodeFormVisible = false;
                })
            },
            add_code_item(){
                if(this.current_code === null) {
                    this.$message({
                        type: 'error',
                        message: '请选择一行后操作'
                    });
                }else {
                    this.addCodeItemFormVisible = true;
                }
            },
            save_add_code_item_data(){
                var params = {
                    'detailKey': this.addCodeDetailFormData.detailKey,
                    'detailValue': this.addCodeDetailFormData.detailValue,
                    'sysCodeId': this.current_code.codeId
                };

                this.$http.post('/syscodeDetail/syscodeDetail', this.$qs.stringify(params)).then(response => {
                    this.current_code_details.push(response);
                    this.addCodeItemFormVisible = false;
                    this.addCodeDetailFormData = {};
                });
            },
            openUpdateDetailDialog(index, row){
                this.updateCodeDetailFormData = clone(row);
                this.updateCodeDetailFormData.index = index;
                this.updateCodeItemFormVisible= true;
            },
            save_update_code_item(){
                let params = {
                    'detailId': this.updateCodeDetailFormData.detailId,
                    'detailKey': this.updateCodeDetailFormData.detailKey,
                    'detailValue': this.updateCodeDetailFormData.detailValue
                }

                http.put('/syscodeDetail/syscodeDetail', this.$qs.stringify(params)).then(response => {
                    const index = this.updateCodeDetailFormData.index;
                    this.current_code_detail = response;
                    this.current_code_details[index] = response;
                    this.updateCodeItemFormVisible = false;
                });
            }
        }

    }
    function clone(origin) {
        return Object.assign({}, origin);
    }
</script>

<style scoped>

</style>